
<style type="text/css">
<!--
a, a:visited {
	color: #1272B5;
}
a.tag {
	background-color:#E0EAF1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	corner-radius: 5px;
	border:1px solid #E0EAF1;
	color:#3E6D8E;
	font-size:90%;
	line-height:2.4;
	margin:2px 2px;
	padding:2px 4px;
	text-decoration:none;
	white-space:nowrap;
	font-size: 12px;
}
a.tag:hover {
	text-decoration: none;
	color: #7F9FB6;
}

.add-link-form {
 	margin-right: 5px;
 	margin-bottom: 5px;
 	margin-top: 10px;
}

.link {
	min-height: 40px;
	border-bottom:1px dashed #999;
	display:block;
	padding: 10px 2px;
	margin: 4px 0px;
	margin-right: 5px;
}


.link:hover {
 	background-color:#eee;
	cursor:pointer;
}
 
.taglist {
	text-align:right;
}

.link .atitle {
	margin:0px 0px 2px 0px;
}

.filter {
	color: #bbb;
	font-size:10px;
	border:1px dashed #999;
	margin-right: 5px;
}

.ops {
	color: #bbb;
	font-size:10px;
	text-align:right;
}
.ops a {
	color: #888;
	text-decoration:none;
}

#panel-frame {
	position:relative; 
	max-width:700px; 
	position:fixed;
	
}

.panel { 
	background-color:#f2f2f2; width:340px; height:550px;
	margin-top:20px;
	position:relative;
	position:absolute;
	border:solid 1px #999999;
	border-left:0px;
	left:0;
}

.data {
	font-size:176px;
}
-->
</style>

#{extends 'main.html' /}
#{set 'title'}
	eazyBookmark - ${user}
#{/set}

	<div class="alert-message error" id="error-alert">
  		<a class="close" href="#">&times;</a>
  		<p><strong>${flash.error}!</strong></p>
	</div>
	<div class="alert-message success" id="success-alert">
  			<a class="close" href="#">&times;</a>
  			<p><strong>${flash.success}!</strong></p>
	 </div>
	<script type="text/javascript">
	  #{if flash.error}    	
        	$("#error-alert").alert();
        	$("#success-alert").alert('close');
	   #{/if}
	  #{else}
			#{if flash.success}  			
        		$("#success-alert").alert();
        		$("#error-alert").alert('close');
			#{/if}
			#{else}
				$("#success-alert").alert('close');
				$("#error-alert").alert('close');
			#{/else}	
		#{/else}
		
		
		$(document).ready(function() {
 
  
   			$('.link').click(function() {
   				var id= $(this).attr('id');
   				var data_id= $(".data").html();
    			var panel= $('.panel');
				var panel_width=$('.panel').css('left');
				if(data_id==id) {
					panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});	
				} else {
					if(panel_width=='341px') {
					
					}else {
    					panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
    				
					}			
				}
				
				
				$('.data').html(id);
				
				return false;
	
  });
  
 
  
  $('.close').click(function()  {
    var panel= $('.panel');
    panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
    panel.css('display','none');
	return false;
	
  });
  
  
  
});
	</script>

<div id="add-link-form" class="modal hide fade">
     <div class="modal-header">
              <a href="#" class="close">&times;</a>
              <h3>Add bookmark</h3>
            </div>
          	#{form @Profile.addlink(), class:'form-stacked' }	
        		<fieldset>
        			<div class="clearfix">
            			<label for="url-textbox">Link</label>
            			<div class="input">
              				<input class="xlarge" id="url-textbox" name="url" size="30" type="text" />
            			</div>
          			</div><!-- /clearfix -->
          			<div class="clearfix">
            			<label for="url-textbox">Tags,comma separated tag names e.g. news, technical, travel, leisure</label>
          				<div class="input">
              				<input class="xlarge" name="tags" type="text"/>
            			</div>
          			</div><!-- /clearfix -->
          			<div class="actions">
            			<input type="submit" class="btn primary" value="Save changes">
          			</div>
        		</fieldset>
        	#{/form}
			
</div>



      <div class="span9" style="border:solid 1px #999999;float:right;width:350px;">
        Level 2
      </div>
      
      <div id="panel-frame"> 
			<div class="panel"> 
			<div class="head"> 
			<a href="#" class="close">Close</a> 
			</div> 
		<div class="data" style="padding:20px"></div> 
		</div> 
</div>
      
      
      <div class="span5" style="border:dashed 1px #999999;float:left;position:relative;width:350px;min-height: 500px;background:#FFF;">
        Level 2
      </div>
    











		
